<template>
    <el-container>
        <el-main style="display: flex; ">
            <el-card v-for="(item, index) in aiApplicationList" :key="index" class="ai-application" shadow="hover">
                <h4><span>{{ item.name }}</span><el-tag style="margin-left: 10px;" size="small">简单Agent</el-tag></h4>
                <p>{{ item.description }}</p>
                <template #footer>
                    <div class="ai-application-actions">
                        <el-icon>
                            <Setting @click="editApplication(item)" />
                        </el-icon>
                        <el-icon>
                            <Delete @click="deleteApplication(item)" />
                        </el-icon>
                        <KuiIcon name="VideoPlay" @click="openAgent(item)" />
                    </div>
                </template>

            </el-card>
            <el-card class="ai-application" @click="createApplication" shadow="hover">
                <div style="line-height: 80px;">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>创建应用</span>
                </div>
            </el-card>
        </el-main>

        <el-dialog title="创建应用" v-model="isDialogVisible">
            <el-form ref="applicationFormRef" :rules="applicationFormRules" :model="applicationForm" label-width="80px">
                <el-form-item label="应用名称">
                    <el-input v-model="applicationForm.name"></el-input>
                </el-form-item>
                <el-form-item label="应用描述">
                    <el-input v-model="applicationForm.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="isDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
import aiAPI from "@/api/ai";
import ApplicationSetting from "./application-setting.vue";

export default {
    components: {
        ApplicationSetting
    },
    emits: ['edit'],
    data() {
        return {
            appName: '',
            appDescription: '',
            aiApplicationList: [],
            isDialogVisible: false,
            applicationForm: {
                name: '',
                description: ''
            },
            applicationFormRules: {
                name: [
                    { required: true, message: '请输入应用名称', trigger: 'blur' }
                ],
            },
            applicationSettingModal: {
                visible: false,
                applicationId: null,
            },
        };
    },
    created() {
        this.fetchApplications();
    },
    methods: {
        fetchApplications() {
            aiAPI.fetchApplicationList().then(response => {
                this.aiApplicationList = response.data;
            });
        },
        createApplication() {
            this.resetForm();
            this.isDialogVisible = true;
        },
        submitForm() {
            this.$refs.applicationFormRef.validate(valid => {
                if (valid) {
                    aiAPI.createApplication(this.applicationForm).then(response => {
                        this.aiApplicationList.push(response.data);
                        this.isDialogVisible = false;
                        this.resetForm();
                    });
                }
            });
        },
        resetForm() {
            this.applicationForm = {
                name: '',
                description: ''
            };
        },
        editApplication(item) {
            this.$emit('edit', item);
        },
        deleteApplication(item) {
            aiAPI.deleteApplication(item.id).then(() => {
                this.aiApplicationList = this.aiApplicationList.filter(app => app.id !== item.id);
            });
        },
        openAgent(item) {
            window.open(`/chat/${item.id}`, '_blank');
            // this.$router.push({ name: 'AiChat', params: { applicationId: item.id } });
        }
    }
};
</script>

<style lang="scss" scoped>
.ai-application {
    width: 300px;
    margin-right: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;

    :deep(.el-card__body) {
        padding: 0px;
        height: 80px;
    }

    :deep(.el-card__footer) {
        padding: 10px 0px 0px 0px;

        .el-icon {
            cursor: pointer;
            margin-right: 15px;
            font-size: 18px;
        }
    }

    h4 {
        font-size: 16px;
        margin: 2px 0px;
    }

    p {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

    &:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {}
    }

    .ai-application-actions {}
}
</style>